<template>
  <van-header title="歌单详情" left-arrow></van-header>
  <div class="loading" v-if="songList.length == 0">
    <van-loading size="24px" vertical>加载中...</van-loading>
  </div>
  <div class="section" v-else>
    <div class="recomdetail-header">
      <div class="recomdetail-header__top">
        <img :src="info.coverImgUrl" alt="" />
        <div>
          <h1>{{ info.name }}</h1>
          <p>{{ info.description }}</p>
        </div>
      </div>
      <div class="recomdetail-header__bottom">
        <span
          ><van-icon name="like-o" size="24" /><br />
          {{ info.subscribedCount > 999 ? '999+' : info.subscribedCount }}</span
        >
        <span
          ><van-icon name="chat-o" size="24" /><br />{{ info.commentCount > 999 ? '999+' : info.commentCount }}</span
        >
        <span><van-icon name="share-o" size="24" /><br />分享</span>
        <span><van-icon name="down" size="24" /><br />下载</span>
      </div>
    </div>
    <div class="recomdetail-songs">
      <song-list :songs="songList" @handleItemClick="handlePlay" @handleActionSheet="handleActionSheet"></song-list>
    </div>
    <van-action-sheet v-model:show="actionSheetShow">
      <van-cell></van-cell>
      <van-cell icon="like-o" title="添加至我喜欢"></van-cell>
      <van-cell icon="add-o" title="添加到歌单"></van-cell>
      <van-cell icon="music-o" title="下一首播放" @click="handleAddNextPlay"></van-cell>
      <van-cell icon="share-o" title="分享"></van-cell>
      <van-cell icon="down" title="下载"></van-cell>
      <van-cell></van-cell>
    </van-action-sheet>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, reactive } from 'vue';
import VanHeader from '@/components/header/Header.vue';
import SongList from '@/components/songlist/SongList.vue';
// api
import { createSong } from '@/assets/js/song';
import { getPlayListDetail } from '@/api/wangyi/playlist';

import { useMyRouters } from '@/router';
import { useMyStores } from '@/store';
import { Toast } from 'vant';

const { route } = useMyRouters();
const { playerStore } = useMyStores();

// 当前页面信息
const info = reactive({
  coverImgUrl: '',
  name: '',
  description: '',
  subscribedCount: 0,
  commentCount: 0,
  shareCount: 0
});

onBeforeMount(() => {
  console.log('页面参数：' + route.query.id);
  _getPlayListDetail(route.query.id);
});

// 当前歌曲列表
const songList = ref<Array<any>>([]);
const _getPlayListDetail = async (id: any) => {
  const { playlist } = await getPlayListDetail({ id: id });
  // 获取页面信息
  info.coverImgUrl = playlist.coverImgUrl;
  info.name = playlist.name;
  info.description = playlist.description;
  info.subscribedCount = playlist.subscribedCount;
  info.commentCount = playlist.commentCount;
  info.shareCount = playlist.shareCount;
  // 歌曲列表
  let tracks = playlist.tracks;
  let songs = [];
  for (let i = 0; i < tracks.length; i++) {
    songs.push(createSong(tracks[i]));
  }
  songList.value = songs;
};

// 动作面板
const actionSheetShow = ref(false);
const actionSheetIndex = ref(0);
const handleActionSheet = (index: number) => {
  actionSheetShow.value = true;
  actionSheetIndex.value = index;
};

// 播放
const handlePlay = (index: number) => {
  // let cindex = index;
  // if (playerStore.currentPlayList.length == 0) {
  //   // 存储播放列表数据
  //   playerStore.SET_CURRENT_PLAY_LIST(songList.value);
  //   playerStore.SET_SEQUENCE_LIST(songList.value);
  // } else {
  //   const song = songList.value[index];
  //   playerStore.ADD_TO_PLAY_LIST(song);
  //   cindex = playerStore.currentPlayList.findIndex(item => item.id == song.id);
  // }
  // 存储播放列表数据(每一个歌单都是一个新的列表)
  playerStore.SET_CURRENT_PLAY_LIST(songList.value);
  playerStore.SET_SEQUENCE_LIST(songList.value);
  // // 显示全局播放器，实现二次点击打开全屏播放器
  // if (currentPlayIndex.value !== index) {
  //   playerStore.SET_MINI_PLAYER(true);
  // } else {
  //   playerStore.SET_MINI_PLAYER(false);
  //   playerStore.SET_FULL_PLAYER(true);
  // }
  playerStore.SET_FULL_PLAYER(true);
  playerStore.SET_MINI_PLAYER(false);
  // 改变播放索引
  playerStore.SET_CURRENT_PLAY_INDEX(index);
  // 改变播放状态
  playerStore.SET_AUDIO_PLAY_STATE(true);
};
// 添加到下一首播放
const handleAddNextPlay = () => {
  const song = songList.value[actionSheetIndex.value];
  playerStore.ADD_TO_NEXT_PLAY(song);
  // actionSheetShow.value = false;
  Toast('添加成功')
}

</script>

<style lang="less" scoped>
img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}
.recomdetail-header {
  padding: 10px;
  overflow: hidden;
  img {
    width: 90px;
    height: 90px;
  }
  .recomdetail-header__top {
    display: flex;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    h1 {
      margin-top: 5px;
      font-size: 17px;
    }
    p {
      line-height: 18px;
    }
    h1, p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .recomdetail-header__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    span {
      display: inline-block;
      width: 20%;
      text-align: center;
      line-height: 18px;
    }
  }
}
.recomdetail-songs {
  .van-icon-ellipsis {
    transform: rotateZ(90deg);
  }
}
.recomdetail-loading {
  text-align: center;
  line-height: 200px;
}
.content {
  padding: 16px 16px 160px;
}
</style>
